<script setup>
import { onMounted, ref, watch } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
let props = defineProps(['associationClassificationAllData'])

const chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);

// 总数据
const option = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 0,
    bottom: 20,
    left: '5%',
    right: '8%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  yAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
  },
  xAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110],
      type: 'bar',
      barWidth: '60%',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#00e5ff',
            },
            {
              offset: 1,
              color: '#00a8ff',
            },
          ],
        },
      },
    },
  ],
});

// 监听数据变化
watch(
  () => props.associationClassificationAllData,
  (newVal) => {
    if (newVal) {
      option.value.yAxis.data = newVal.categoryName || [];
      option.value.series[0].data = newVal.seriesData?.[0]?.data || [];
      renderEcharts(option.value);
    }
  },
  { immediate: true },
);


</script>

<template>
  <div class="box">
    <EchartsUI ref="chartRef" class="w-full" style="height: 260px" />
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
}
</style>
